<template>
  <div>
    <div class="qr-div">
      <a-input
        type="text"
        style="width: 30%"
        placeholder="请输入需要生成的二维码链接"
        v-model:value="url"
      />
      <a-button style="background-color: #0960bd; color: white" @click="getQrcode">生成</a-button>
    </div>
    <div class="qr-div">
      <QrCode
        :value="qrCodeUrl"
        ref="qrRef"
        :logo="{
          src: LogoImg,
          logoSize: 0.2,
          borderSize: 0.05,
          borderRadius: 10,
        }"
      />
      <br />
    </div>
    <div class="qr-div">
      <a-button class="mb-2" type="primary" v-if="qrCodeUrl" @click="download"> 下载 </a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { QrCode, QrCodeActionType } from '@/components/Qrcode/index';
  import LogoImg from '/@/assets/images/logo.png';

  const url = ref('');
  const qrCodeUrl = ref('');
  export default defineComponent({
    components: { QrCode },
    setup() {
      const qrRef = ref<Nullable<QrCodeActionType>>(null);
      function download() {
        const qrEl = unref(qrRef);
        console.log(qrEl);
        if (!qrEl) return;
        qrEl.download('二维码');
      }

      return {
        url,
        qrCodeUrl,
        LogoImg,
        download,
        qrRef,
        getQrcode,
      };
    },
  });
  function getQrcode() {
    console.log(url);
    qrCodeUrl.value = url.value;
  }
</script>
<style scoped>
  .qrcode-demo-item {
    width: 30%;
    margin-right: 1%;
  }

  .qr-div {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
</style>
